<title>视频mp4管理</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>资源管理</cite></a>
        <a><cite>视频mp4管理</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto bordernone">
            <div class="layui-form-item">

                <div class="btnleft">
                    <div class="layui-inline">
                        <label class="layui-form-label" for="ResName">名称：</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" maxlength="20" name="UserName" id="ResName" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" data-type="reload" id="reload"><i
                                class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
                <div class="btnright">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="movebtn"><i class="layuiadmin-button-btn">移动到</i>
                        </button>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="delbtn"><i class="layuiadmin-button-btn">删除</i>
                        </button>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="addfolderbtn"><i
                                class="layuiadmin-button-btn">新建文件夹</i>
                        </button>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="uploadbtn"><i class="layuiadmin-button-btn">上传</i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <div class="listhead">
                <input id="allcheck" class="mynav" type="checkbox" title="" name="checkall">&nbsp;&nbsp;
                <span id="root" class="mynav" name="root">根目录</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                <span id="back" class="mynav" resid="" name="back">返回上一级</span>&nbsp;&nbsp;
                <span id="curr" resid="" name="curr"></span>
            </div>
            <div id="datatable">
            </div>
            <script id="datatabletpl" type="text/html">
                <ul id="dataul">
                    {{each Data as item index}}
                    <li id="datali">
                        <div class="lileft">
                            <input type="checkbox" value="{{item.ID}}" name="fileitem">&nbsp;&nbsp;
                            {{if item.IsFolder}}
                            <img src="../../../start/layui/images/folder.png">
                            &nbsp;
                            <span id="filename" resid="{{item.ID}}" folder="true">{{item.Name}}</span>
                            {{else}}
                            {{if item.ResourceType == 0}}
                            <img src="../../../start/layui/images/mp4.png">
                            {{else if item.ResourceType == 1}}
                            <img src="../../../start/layui/images/pdf.png">
                            {{else if item.ResourceType == 2}}
                            <img src="../../../start/layui/images/rich.png">
                            {{else if item.ResourceType == 3}}
                            <img src="../../../start/layui/images/rar.png">
                            {{/if}}
                            &nbsp;
                            <span id="filename" resid="{{item.ID}}">{{item.Name}}</span>
                            {{/if}}
                        </div>
                        <div class="liright">
                            <span id="modify" href="javascript:;" class="rowaction" resid="{{item.ID}}">重命名</span>
                            &nbsp;&nbsp;
                            <span id="del" href="javascript:;" class="rowaction" resid="{{item.ID}}">删除</span>
                            {{if item.IsFolder == false}}
                            &nbsp;&nbsp;
                            <span id="detail" href="javascript:;" class="rowaction" resid="{{item.ID}}" resurl="{{item.FileAttachment.Path}}">详细</span>
                            {{/if}}
                        </div>
                    </li>
                    {{/each}}
                </ul>
            </script>
        </div>
    </div>
</div>
<script>
    $(document).ready(function (e) {

        let ID = ""; //当前资源ID
        let Name = ""; //当前资源Name 
        let NavIDs = [];
        let NavNames = [];
        let ResType = 0; //0：MP4视频，1：pdf文档，2：富文本 3：Rar，Zip压缩文件

        if (localStorage.getItem("CurrID") != null) {
            ID = localStorage.getItem("CurrID");
        }
        if (localStorage.getItem("CurrName") != null) {
            Name = localStorage.getItem("CurrName");
        }
        if (Name != "") {
            $("#curr").html("&gt;&nbsp;&nbsp;" + Name);
        }

        let Token = "";

        function login() {
            var fromData = new FormData();
            fromData.append("userid", "admin");
            fromData.append("password", "000000");
            fromData.append("cookie", false);
            fromData.append("rememberLogin", false);
            $.ajax({
                type: "POST",
                url: layui.setter.url1 + '/api/_login/Login',
                async: false,
                contentType: false,
                processData: false,
                dataType: "json",
                mimeType: "multipart/form-data",
                data: fromData,
                success: function (res) {
                    if (res) {
                        Token = res.token_type + " " + res.access_token;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.open({
                        tittle: "错误",
                        type: 0,
                        content: "调用接口异常"
                    });
                }
            });
        }

        login();

        //初始化列表
        loadtable();

        //
        $("#allcheck").click(function (e) {
            let fileitems = $("#dataul input[type=checkbox]")
            if (this.checked) {
                for (let i of fileitems) {
                    i.checked = true;
                }
            } else {
                for (let i of fileitems) {
                    i.checked = false;
                }
            }
        });

        //查询
        $('#reload').click(function (e) {
            loadtable();
        });

        function videoupdate() {
            //根目录
            $(document).on('click', '#root', function (e) {
                // $('#root').click( function (e) {
                ID = "";
                Name = "";
                NavIDs = [];
                NavNames = [];
                $("#curr").html("");
                $("#ResName").val("");
                loadtable();
            });

            //上一级
            // $(document).on('click', '#back', function (e) {
            $('#back').click(function (e) {
                $("#ResName").val("");
                NavIDs.pop();
                NavNames.pop();
                if (NavIDs.length > 0) {
                    ID = NavIDs[NavIDs.length - 1];
                    Name = NavNames[NavNames.length - 1];
                    $("#curr").html("&gt;&nbsp;&nbsp;" + Name);
                } else {
                    ID = "";
                    Name = "";
                    $("#curr").html("");
                }
                localStorage.setItem("CurrID", ID);
                localStorage.setItem("CurrName", Name);
                loadtable();
            });

            //点击目录的方法
            $("#datatable").on('click', '#filename', function (e) {
            // $('#filename').click(function (e) {
                $("#ResName").val("");
                if ($(this).attr("folder")) {
                    ID = $(this).attr("resid");
                    Name = $(this).text();
                    NavIDs.push(ID);
                    NavNames.push(Name);
                    $("#curr").html("&gt;&nbsp;&nbsp;" + Name);
                    localStorage.setItem("CurrID", ID);
                    localStorage.setItem("CurrName", Name);
                    loadtable();
                }
            });

            //重命名
            $("#datatable").on('click', '#modify', function (e) {
            // $('#modify').click(function (e) {
                let resid = $(this).attr("resid");
                layer.prompt({
                    title: '重命名',
                    formType: 2
                }, function (value, index, elem) {
                    $.ajax({
                        url: layui.setter.url1 + '/api/Resource/ReName',
                        type: 'post',
                        headers: {
                            "Authorization": Token
                        },
                        contentType: 'application/json',
                        data: JSON.stringify({
                            "Id": resid,
                            "Name": value
                        }),
                        success: function (res) {
                            let data = jQuery.parseJSON(res);
                            if (data.Code != 200) {
                                layer.open({
                                    content: "重命名失败",
                                    skin: 'msg my-btn',
                                    time: 2000
                                });
                            } else {
                                loadtable();
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.open({
                                tittle: "错误",
                                type: 0,
                                content: "调用接口异常"
                            });
                        }
                    });
                    layer.close(index);
                });
            });

            //删除单个
            $("#datatable").on('click', '#del', function (e) {
            // $('#del').click(function (e) {
                let resid = $(this).attr("resid");
                layer.confirm('确定删除吗？', function (index) {
                    $.ajax({
                        url: layui.setter.url1 + '/api/Resource/Delete',
                        type: 'post',
                        headers: {
                            "Authorization": Token
                        },
                        contentType: 'application/json',
                        data: JSON.stringify({
                            "Id": resid
                        }),
                        success: function (res) {
                            let data = jQuery.parseJSON(res);
                            if (data.Code != 200) {
                                layer.open({
                                    content: "删除失败",
                                    skin: 'msg my-btn',
                                    time: 2000
                                });
                            } else {
                                loadtable();
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.open({
                                tittle: "错误",
                                type: 0,
                                content: "调用接口异常"
                            });
                        }
                    });
                    layer.close(index);
                });
            });
            //详细
            $("#datatable").on('click', '#detail', function (e) {
            // $('#detail').click(function (e) {
                console.log($(this).attr("resurl"));
                layer.open({
                    type: 2,
                    title: false,
                    area: ['800px', '600px'],
                    shade: 0.8,
                    fixed: false, //不固定
                    maxmin: true,
                    closeBtn: 0,
                    shadeClose: true,
                    content:layui.setter.url1 +  $(this).attr("resurl").replace("./wwwroot","")
                    });
            });
        }
        //移动文件
        // $(document).on('click', '#movebtn', function (e) {
        $('#movebtn').click(function (e) {
            let fileitems = $("#dataul input[type=checkbox]:checked")
            if (fileitems.length > 0) {
                let IDs = [];
                for (let i of fileitems) {
                    IDs.push(i.value)
                }
                localStorage.setItem("ListFileItems", JSON.stringify(IDs));
                localStorage.setItem("ListResType", ResType);
                layui.admin.popup(jumpDetaliUrl('移动到', "systeminfo/list"));
            } else {
                layer.open({
                    content: "请选择要移动的项",
                    skin: 'msg my-btn',
                    time: 2000
                });
            }
        });

        //批量删除文件
        // $(document).on('click', '#delbtn', function (e) {
        $('#delbtn').click(function (e) {
            let fileitems = $("#dataul input[type=checkbox]:checked")
            if (fileitems.length > 0) {
                layer.confirm('确定删除吗？', function (index) {
                    let result = true;
                    for (let i of fileitems) {
                        $.ajax({
                            url: layui.setter.url1 + '/api/Resource/Delete',
                            type: 'post',
                            headers: {
                                "Authorization": Token
                            },
                            contentType: 'application/json',
                            data: JSON.stringify({
                                "Id": i.value
                            }),
                            success: function (res) {
                                let data = jQuery.parseJSON(res);
                                if (data.Code != 200) {
                                    result = false;
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                result = false;
                                layer.open({
                                    tittle: "错误",
                                    type: 0,
                                    content: "调用接口异常"
                                });
                            }
                        });
                    }
                    if (result) {
                        loadtable();
                    } else {
                        layer.open({
                            content: "删除过程中出现错误",
                            skin: 'msg my-btn',
                            time: 2000
                        });
                    }
                    layer.close(index);
                });
            } else {
                layer.open({
                    content: "请选择要删除的项",
                    skin: 'msg my-btn',
                    time: 2000
                });
            }
        });

        //新建文件夹
        // $(document).on('click', '#addfolderbtn', function (e) {
        $('#addfolderbtn').click(function (e) {
            layer.prompt({
                title: '重命名',
                formType: 2
            }, function (value, index, elem) {
                $.ajax({
                    url: layui.setter.url1 + '/api/Resource/AddFolder',
                    type: 'post',
                    headers: {
                        "Authorization": Token
                    },
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "ParrentId": ID,
                        "Type": ResType,
                        "Name": value
                    }),
                    success: function (res) {
                        let data = jQuery.parseJSON(res);
                        console.log("新建文件夹：", data);
                        if (data.Code != 200) {
                            layer.open({
                                content: "新建文件夹失败",
                                skin: 'msg my-btn',
                                time: 2000
                            });
                        } else {

                            loadtable();
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.open({
                            tittle: "错误",
                            type: 0,
                            content: "调用接口异常"
                        });
                    }
                });
                layer.close(index);
            });
        });

        //上传文件
        // $(document).on('click', '#uploadbtn', function (e) {
        $('#uploadbtn').click(function (e) {
            localStorage.setItem("OptType", 0); //0表示添加，1表示详情
            localStorage.setItem("SuperName", Name);
            localStorage.setItem("SuperID", ID);
            localStorage.setItem("ResType", ResType);
            layui.admin.popup(jumpDetaliUrl('上传文件', "systeminfo/add"));
        });

        //查询条件
        function getSearchParam() {
            return {
                "Id": ID,
                "Type": ResType,
                "Key": $("#ResName").val(),
                "Page": 0,
                "Limit": 10,
                "Count": 0,
                "PageCount": 0
            };
        }

        //加载表格
        function loadtable() {
            console.log(getSearchParam());
            $.ajax({
                type: "POST",
                url: layui.setter.url1 + '/api/Resource/List',
                contentType: 'application/json',
                headers: {
                    "Authorization": Token
                },
                // xhrFields: {
                //     withCredentials:true  //支持附带详细信息
                // },
                // crossDomain:true,//请求偏向外域
                data: JSON.stringify(getSearchParam()),
                success: function (res) {
                    let data = jQuery.parseJSON(res);
                    console.log("List:", data);
                    if (data.Code == 200) {
                        $("#datatable").empty();
                        $("#datatable").append(template('datatabletpl', data));
                        videoupdate();
                    } else {
                        layer.open({
                            tittle: "错误",
                            type: 0,
                            content: data.Msg
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.open({
                        tittle: "错误",
                        type: 0,
                        content: "调用接口异常"
                    });
                }
            });
        }
    });
</script>